<template>
	<view>
		<view class="main">
			<view class="item" v-for="item in renderData" :key="item.id">
				<view class="user_content" >
					<view class="user_pic">
						<view>
							<u-avatar :src="getImg(item.user.userPic)" >
								
							</u-avatar>
						</view>
						<!-- <image class="img" :src="getImg(item.user.userPic)"></image> -->
					</view>
					<view class="user">
						<view class="name">
							<text>{{item.user.username}}</text>
						</view>
						<view class="time">
							<text>{{item.create_time}}</text>
						</view>
					</view>
				</view>
				<view class="topic_content">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="content">
						<text>{{item.sentence}}</text>
					</view>
					<view class="pic">
						<view class="pic_item" 
						@tap="openImg(getImg(img))"
						:class="{four:item.images.split('').length <=4,only:item.images.split('').length === 1}"
						 v-for="(img,index) in item.images.split('').length >=9?item.images.split('').slice(0,9):item.images.split('')" :key="index">
							<u-image width="100%" height="100%" :src="getImg(img)" :fade="true" duration="450" :show-menu-by-longpress="true">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</view>
				</view>
				<view class="topic_exchange" v-if="item.status === 1">
					<view class="address">
						<u-icon class="icon" name="map"></u-icon>
						<text>{{item.address}}</text>
					</view>
					<view class="reply">
						<view class="msg">
							<view class="icon">
								<u-icon class="icon" name="share"></u-icon>
							</view>
							<text>{{judgeNum(item.reply)}}</text>
						</view>
						<view class="msg">
							<view class="icon">
								<image class="img" src="@/static/img/courseBuy/comments.png" alt=""></image>
							</view>
							<text>{{judgeNum(item.reply)}}</text>
						</view>
						<view class="msg">
							<view class="icon">
								<image class="img" src="@/static/img/site/collect.png" alt=""></image>
							</view>
							<text>{{judgeNum(item.reply)}}</text>
						</view>
						<view class="praise">
							<view class="icon">
								<image class="img" src="@/static/img/courseBuy/praise2.png" alt=""></image>
							</view>
							<text>{{judgeNum(item.like)}}</text>
						</view>
					</view>
				</view>
				<view class="status" :class="{pass:item.status == 1,wait_pass:item.status == 2}">
					<text>{{ item.status | getStatus }}</text>
				</view>
				<u-line color="#9e9e9e"></u-line>
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-image width= "580rpx"
					height="580rpx" :src="showImg" :fade="true" duration="450" :show-menu-by-longpress="true">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {renderData} from "@/mock/renderData.js"
	export default {
		data() {
			return {
				// video_time_update_status: true,
				renderData:[],
				show: false,
				showImg:""
			}
		},
		onLoad(){
			this.renderData = renderData
			console.log(this.renderData);
		},
		filters:{
			getStatus(num){
				switch (num){
					case 1:
						return "已通过"
					case 2:
						return "待审核"
					default:
						return "未通过"
				}
			}
		},
		methods: {
			 // 播放进度变化时触发
			        // video_time_update(e) {
			        // 	// e.detail.duration 为视频总长度，在没有加载到视频的时候总长度为 -0.0001
			        // 	// 当获取到视频长度后进入if
			        //     if (this.video_time_update_status && e.detail.duration > 0) {
			        //     	// 第一次进入if 关闭更新状态，防止循环暂停
			        //         this.video_time_update_status= false;
			        //         // 获取视频
			        //         let videoContext = uni.createVideoContext('myVideo');
			        //         // 暂停视频
			        //         videoContext.pause();
			        //     }
			        // }
			getImg(num){
				return `../../../../static/pic/${num}.jpeg`
			},
			judgeNum(num){
				if(num.toString().length >= 4){
					return (num / 10000).toString().split(".")[0]+"."+(num / 1000).toString().split(".")[0].substring(0,2) + "w"
				}
				return num
			},
			openImg(imgSrc){
				console.log(imgSrc);
				this.show = true
				this.showImg = imgSrc
			}
		}
	}
</script>

<style lang="scss">
	.img{
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
	page{
		background-color: #fff;
		&::before{
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background-color: #e8e8e8;
			
		}
	}
	.main{
		padding: 24rpx 30rpx 0;
		box-sizing: border-box;
		font-size: 30rpx
	}
	.item{
		position: relative;
		margin-bottom: 30rpx;
		.user_content{
			display: flex;
			margin-bottom: 24rpx;
			color: #393939;
			.user_pic{
				margin-right: 36rpx;
			}
			.name{
				margin-bottom: 20rpx;
			}
			.time{
				color: #aaaaaa;
				font-size: 24rpx
			}
		}
		.topic_content{
			margin-bottom: 40rpx;
			.title{
				font-size: 34rpx;
				margin-bottom: 24rpx;
			}
			.content{
				font-size: 32rpx;
				color: #5e5e5e;
				display: -webkit-box; //使用了flex，需要加
				 overflow: hidden;     //超出隐藏
				 word-break: break-all; //纯英文、数字、中文
				 text-overflow: ellipsis;  //省略号
				 -webkit-box-orient: vertical; //垂直
				 -webkit-line-clamp: 3;  //显示一行
				 white-space:pre-line; 
				 margin-bottom: 20rpx;
			}
			.pic{
				display: flex;
				flex-wrap: wrap;
				.pic_item{
					padding: 10rpx;
					width: 230rpx;
					height: 230rpx;
					border-radius: 34rpx;
					overflow: hidden;
				}
				.four{
					width: 344rpx;
					height: 344rpx;
					border-radius: 44rpx;
				}
				.only{
					width: 532rpx;
					height: 532rpx;
					padding: 0;
					border-radius: 12rpx;
				}
			}
		}
		.topic_exchange{
			display: flex;
			justify-content: space-between;
			color: #9e9e9e;
			margin-bottom: 48rpx;
			font-size: 24rpx;
			.icon{
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
			.msg{
				display: flex;
				margin-right: 24rpx;
			}
			.praise{
				display: flex;
			}
			.reply{
				display: flex;
			}
		}
		.status{
			width: 88rpx;
			height: 46rpx;
			text-align: center;
			line-height: 46rpx;
			color: #fff;
			background-color: rgba(255, 125, 121, 1);
			font-size: 20rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
		.pass{
			background-color: rgba(141, 197, 53, 1);
		}
		.wait_pass{
			background-color: rgba(247, 175, 80, 1);
		}
		.address{
			width: 232rpx;
			color: #1287F9;
			font-size: 32rpx;
			display: -webkit-box; //使用了flex，需要加
			overflow: hidden;     //超出隐藏
			word-break: break-all; //纯英文、数字、中文
			text-overflow: ellipsis;  //省略号
			-webkit-box-orient: vertical; //垂直
			-webkit-line-clamp: 1;  //显示一行
			white-space:pre-line;
		}
	}
	.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
</style>
